var WorkProcessTable = function () {
  var template = /* html */ `
    <div class="work-process-table">
      <table ref="table" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th style="min-width:50px">车间</th>
            <th style="min-width:50px">工序</th>
            <th style="min-width:50px">实际<br>产能</th>
            <th style="min-width:65px">计划<br>日产能</th>
            <th style="min-width:50px">排单<br>产能</th>
            <th style="min-width:65px">产能<br>达成率</th>
            <th style="min-width:65px">车间<br>周转量</th>
            <th v-for="workProDate in workProDateList" :key="'date_'+workProDate" style="min-width:45px">
              {{workProDate}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(workPro,index) in workProList" :key="'workPro_'+index">
            <td>{{workPro.workShopName}}</td>
            <td>{{workPro.processName}}</td>
            <td>{{workPro.sumCapacity}}</td>
            <td>{{workPro.dayCapacity}}</td>
            <td>{{workPro.turnover}}</td>
            <td>{{workPro.rate}}%</td>
            <td>{{workPro.workshopTurnover}}</td>
            <td v-for="workProDate in workProDateList" :key="'date_'+workProDate" :class="{'has-warn':checkHasWarn(workPro,workProDate)}">
              {{getDateCapacity(workPro,workProDate)}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  `;

  return {
    props: {
      workProData: {
        type: Object,
        required: true
      }
    },

    inject: ['workProcedureBoard'],

    watch: {
      changeData: function (newData, oldData) {
        if (newData.rowIndex !== oldData.rowIndex || newData.colIndex !== oldData.colIndex) {
          this.setWorkProList();
          this.setWorkProDateList();
          return;
        }

        var proList = newData.workProList;
        var proDateList = newData.workProDateList;
        if (newData.rowIndex >= proList.length || newData.colIndex >= proDateList.length) {
          this.rowIndex = 0;
          this.colIndex = 0;
        } else {
          this.setWorkProList();
          this.setWorkProDateList();
        }
      },
    },

    computed: {
      changeData: function () {
        var workProData = this.workProData;
        return {
          rowIndex: this.rowIndex,
          colIndex: this.colIndex,
          workProList: workProData.searchWorkProList,
          workProDateList: workProData.workProDateList
        };
      }
    },

    data: function () {
      return {
        rowIndex: 0,
        colIndex: 0,
        workProList: null,
        workProDateList: []
      };
    },

    mounted: function () {
      this.setWorkProList();
      this.setWorkProDateList();

      var self = this;
      $(this.$el).resize(function () {
        self.workProcedureBoard.clearTimeoutList(1);
        self.changeColIndex(true);
        self.workProcedureBoard.resetTableRunning();
      });
    },

    methods: {
      setWorkProList: function () {
        var rowIndex = this.rowIndex;
        var workProData = this.workProData;
        var workProList = workProData.getChartWorkProList(rowIndex);
        this.workProList = workProList;
      },

      setWorkProDateList: function () {
        var colIndex = this.colIndex;
        var workProData = this.workProData;
        var workProDateList = workProData.getChartWorkProDateList(colIndex);
        this.workProDateList = workProDateList;
      },

      checkHasWarn: function (workPro, date) {
        var capacity = this.getDateCapacity(workPro, date);
        var dayCapacity = workPro.dayCapacity;
        return dayCapacity > capacity;
      },

      getDateCapacity: function (workPro, date) {
        var capacityObj = workPro.capacityObj;
        var obj = capacityObj[date];
        if (obj === undefined) {
          return 0;
        }

        return obj.capacity;
      },

      tableRunning: function () {
        this.changeColIndex();
      },

      changeColIndex: function (hasResize) {
        var $table = $(this.$refs['table']);
        var tableWidth = $table.width();
        var warpWidth = $(this.$el).width();
        if (warpWidth >= tableWidth) {
          this.colIndex = 0;
          return;
        }

        if (hasResize) {
          return;
        }

        var workProDateList = this.workProDateList;
        var maxCol = workProDateList.length;
        var colIndex = this.colIndex;
        colIndex += 1;
        if (colIndex >= maxCol) {
          colIndex = 0;
        }
        this.colIndex = colIndex;
      }
    },

    template: template
  };
}();
